<template>
    <div class="device-control">
        <!-- Drawer抽屉 -->
        <Drawer
                :title="title"
                v-model="visible"
                width="680"
                draggable
                :mask-closable="type == '0'">
            <div :style="{ maxHeight: maxHeight }" class="drawer-content">
                <div class="drawer-header">
                    <div style="margin-right: 16px">基本信息</div>
                </div>
                <Form label-colon>
                    <Row :gutter="32">
                        <Col span="12">
                            <FormItem label="设备ID">
                                {{ form.id }}
                                <Tooltip trigger="hover" placement="right" content="设备已禁用">
                                    <Icon
                                            v-show="form.status == -1"
                                            type="md-lock"
                                            size="18"
                                            style="margin-left: 10px; cursor: pointer"/>
                                </Tooltip>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="32">
                        <Col span="12">
                            <FormItem label="设备地址">
                                {{ form.address }}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="设备名称">
                                {{ form.name }}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="32">
                        <Col span="12">
                            <FormItem label="设备MAC地址">
                                {{ form.mac }}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="商铺ID">
                                {{ form.shopId }}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row :gutter="32">
                        <Col span="32">
                            {{form.description}}
                        </Col>
                    </Row>
                </Form>
            </div>
            <div :style="{maxHeight:maxHeight}" class="drawer-content"></div>
            <Card>
                <Tabs value="1">
                    <TabPane label="整机控制" name="1">
                        <Card>
                            <Form
                                    ref="form"
                                    :model="form"
                                    :label-width="90"
                                    :rules="formValidate"
                                    style="position: relative">
                                <FormItem label="静音开关" prop="mute">
                                    <i-switch size="large" v-model="message.all_machine_status.mute"
                                              @on-change="handleSwitchMute">
                                        <span slot="open">开启</span>
                                        <span slot="close">关闭</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="语音播报" prop="voice">
                                    <Row :gutter="32">
                                        <Col span="12">
                                            <dict dict="voice_type" v-model="form.type" style="width: 300px"/>
                                        </Col>
                                        <Col span="12">
                                            <Button
                                                    type="primary"
                                                    :loading="submitLoading"
                                                    @click=""
                                                    style="width: 100px">发送
                                            </Button>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <Spin size="large" fix v-if="loading"></Spin>
                            </Form>
                        </Card>
                    </TabPane>
                    <TabPane label="洗涤仓" name="2">
                        <Card>
                            <Form
                                    ref="form"
                                    :model="form"
                                    :label-width="90"
                                    :rules="formValidate"
                                    style="position: relative">
                                <FormItem label="授权状态" prop="open">
                                    <i-switch size="large" v-model="message.wash_store_status.authorize"
                                              @on-change="handleSwitchWashAuth">
                                        <span slot="open">授权</span>
                                        <span slot="close">解除授权</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="洗涤仓开关" prop="mute">
                                    <i-switch size="large" v-model="message.wash_store_status.washStoreStart"
                                              @on-change="handleSwitchWashStart">
                                        <span slot="open">开启</span>
                                        <span slot="close">关闭</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="仓门开关" prop="mute">
                                    <i-switch size="large" v-model="message.wash_store_status.lockDoor"
                                              @on-change="handleSwitchWashOpenDoor">
                                        <span slot="open">开启</span>
                                        <span slot="close">关闭</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="程序设定" prop="voice">
                                    <Row :gutter="32">
                                        <Col span="12">
                                            <dict dict="wash_program" v-model="form.type" style="width: 300px"/>
                                            <Button
                                                    type="primary"
                                                    :loading="submitLoading"
                                                    @click="setProgram"
                                                    style="width: 100px">设定
                                            </Button>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem label="" prop="voice">
                                    <Button
                                            type="error"
                                            :loading="submitLoading"
                                            @click="handleStopWash"
                                            style="width: 120px">强制终止,待机
                                    </Button>
                                </FormItem>
                                <Spin size="large" fix v-if="loading"></Spin>
                            </Form>
                        </Card>
                    </TabPane>
                    <TabPane label="烘干仓①" name="3">
                        <Card>
                            <Form
                                    ref="form"
                                    :model="form"
                                    :label-width="90"
                                    :rules="formValidate"
                                    style="position: relative">
                                <FormItem label="授权状态" prop="open">
                                    <i-switch size="large" v-model="message.drying_1_status.authorize">
                                        <span slot="open">授权</span>
                                        <span slot="close">解除授权</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="烘干仓开关" prop="mute">
                                    <i-switch size="large" v-model="message.drying_1_status.dryStart">
                                        <span slot="open">开启</span>
                                        <span slot="close">关闭</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="程序设定" prop="voice">
                                    <Row :gutter="32">
                                        <Col span="12">
                                            <dict dict="dry_program" v-model="form.type" style="width: 300px"/>
                                        </Col>
                                        <Col span="12">
                                            <Button
                                                    type="primary"
                                                    :loading="submitLoading"
                                                    @click=""
                                                    style="width: 100px">设定
                                            </Button>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem label="" prop="voice">
                                    <Button
                                            type="error" long
                                            :loading="submitLoading"
                                            @click=""
                                            style="width: 120px">强制终止,待机
                                    </Button>
                                </FormItem>
                                <Spin size="large" fix v-if="loading"></Spin>
                            </Form>
                        </Card>
                    </TabPane>
                    <TabPane label="烘干仓②" name="4">
                        <Card>
                            <Form
                                    ref="form"
                                    :model="form"
                                    :label-width="90"
                                    :rules="formValidate"
                                    style="position: relative">
                                <FormItem label="授权状态" prop="open">
                                    <i-switch size="large" v-model="message.drying_2_status.authorize">
                                        <span slot="open">授权</span>
                                        <span slot="close">解除授权</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="烘干仓开关" prop="mute">
                                    <i-switch size="large" v-model="message.drying_2_status.dryStart">
                                        <span slot="open">开启</span>
                                        <span slot="close">关闭</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="程序设定" prop="voice">
                                    <Row :gutter="32">
                                        <Col span="12">
                                            <dict dict="dry_program" v-model="form.type" style="width: 300px"/>
                                        </Col>
                                        <Col span="12">
                                            <Button
                                                    type="primary"
                                                    :loading="submitLoading"
                                                    @click=""
                                                    style="width: 100px">设定
                                            </Button>
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem label="" prop="voice">
                                    <Button
                                            type="error" long
                                            :loading="submitLoading"
                                            @click=""
                                            style="width: 120px">强制终止,待机
                                    </Button>
                                </FormItem>
                                <Spin size="large" fix v-if="loading"></Spin>
                            </Form>
                        </Card>
                    </TabPane>
                </Tabs>
            </Card>
        </Drawer>
    </div>
</template>

<script>
    import {ws} from "@/api/index";
    import {setAuth, setDoor, setMute, setProgram, setStart, stop} from "@/api/things";
    import editor from "@/views/my-components/mrdeer/editor";
    import dict from "@/views/my-components/mrdeer/dict";
    import SockJS from "sockjs-client";
    import Stomp from "stompjs";


    export default {
        name: "control-device",
        components: {editor, dict},
        props: {
            value: {
                type: Boolean,
                default: false,
            },
            data: {
                type: Object,
            },
            type: {
                type: String,
                default: "0",
            },
        },
        data() {
            return {
                visible: this.value,
                title: "",
                submitLoading: false,
                maxHeight: 510,
                form: {},
                formValidate: {},
                messageList: [],
                message: {
                    all_machine_status: {
                        have: false,
                        mute: false,
                        wash: true
                    },
                    drying_1_program: "",
                    drying_1_stage: "",
                    drying_1_status: {
                        authorize: false,
                        dryStart: false
                    },
                    drying_1_time: 1,
                    drying_2_program: "",
                    drying_2_stage: "",
                    drying_2_status: {
                        authorize: false,
                        dryStart: false
                    },
                    drying_2_time: 1,
                    errorCode: {
                        code: ""
                    },
                    wash_program: "",
                    wash_stage: "",
                    wash_store_status: {
                        authorize: false,
                        lockDoor: false,
                        washStoreStart: false
                    },
                    wash_time: 1
                }
            };
        },
        methods: {
            init() {
                //获取当前设备的状态
            },
            connect() {
                let headers = {};
                this.client = Stomp.over(new SockJS(ws));
                this.client.connect(headers, this.onConnected, this.onFailed);
            },
            onConnected(frame) {
                console.log("设备状态,连接ws成功: " + frame);
                let queueSubscription = this.client.subscribe(
                    "/user/" + this.form.address + "/queue/subscribe",
                    this.responseCallback
                );
            },
            responseCallback(frame) {
                this.getData();
                let data = JSON.parse(frame.body);
                this.message = data;
            },
            getData() {

            },
            handleSwitchMute(status) {
                setMute(this.form.address, status).then((res) => {
                    if (res.status == 200) {

                    }
                })
            },
            handleSwitchWashAuth(status) {
                setAuth(this.form.address, status).then((res) => {
                    if (res.status == 200) {

                    }
                })
            },
            handleSwitchWashStart(status) {
                setStart(this.from.address, status).then((res) => {
                    if (res.status == 200) {

                    }
                })
            },
            handleSwitchWashOpenDoor(status) {
                setDoor(this.form.address, status).then((res) => {

                })
            },
            setProgram(type) {
                setProgram(this.form.address, type).then((res) => {

                })
            },
            handleStopWash() {
                stop(this.form.address).then((res) => {

                })
            },
            onFailed(frame) {
                console.log("设备状态,连接ws失败： " + JSON.stringify(frame));
            },
            setCurrentValue(value) {
                if (value === this.visible) {
                    return;
                }
                this.title = "设备详情";
                this.maxHeight = "100%";
                // 回显数据
                let data = this.data;
                this.form = data;
                this.visible = value;
                this.connect();
            },
        },
        watch: {
            value(val) {
                this.setCurrentValue(val);
            },
            visible(value) {
                this.$emit("input", value);
            },
        },
        mounted() {
            this.init();
        },
    };
</script>

<style lang="less">
    @import "../../../styles/drawer-common.less";
    @import "./controlDevice.less";
</style>

